<template>
  <div class="train-container">
    <px-button type="primary" class="goBack-btn" :icon="ArrowLeft" @click="goBack">返回</px-button>
    <div class="train-img-bar">
      <px-image class="train-img" :src="imgUrl" fit="cover" />
      <div class="train-info">
        <div style="text-align: center">
          <h1>{{ courseData.name }}</h1>
          <h4 style="margin-top: 20px">{{ courseData.typeName }}</h4>
        </div>
      </div>
    </div>
    <div class="intruct-container">
      <div class="intruct-bar">
        <span class="intruct-title">培训介绍</span>
        <span class="intruct-content">{{ courseData.intro || "-" }}</span>
      </div>
      <div class="intruct-bar">
        <span class="intruct-title">培训时长</span>
        <span class="intruct-content">{{ formateSeconds(courseData.period) }}</span>
      </div>
      <div class="intruct-bar">
        <span class="intruct-title">关联考试</span>
        <span class="intruct-content">{{ courseData.examName || "-" }}</span>
      </div>
    </div>
    <div class="intruct-footer">
      <px-button type="primary" size="large" @click="goStudy">开始学习</px-button>
    </div>
  </div>
</template>

<script setup>
import { reactive, toRefs, onMounted } from "vue";
import { useRouter } from "vue-router";
import { formateSeconds } from "@/views/all/knowledge/trainManage/utils";
import { ArrowLeft } from "@px-ui/icons-vue";

defineOptions({
  name: "ALL_TRAINMANAGE_MYTRAIN_DETAIL"
});
const router = useRouter();
const state = reactive({
  courseData: {},
  imgUrl: ""
});
const { courseData, imgUrl } = toRefs(state);

onMounted(() => {
  state.courseData = JSON.parse(router.currentRoute.value.query.data);
  const imgInfo = JSON.parse(state.courseData.cover);
  state.imgUrl = imgInfo.fileUrl === null ? "" : imgInfo[0]?.fileUrl;
});

// 返回
const goBack = () => {
  router.push({
    path: "/all/knowledge/trainManage/myTrain"
  });
};

// 开始学习
const goStudy = () => {
  router.push({
    path: "/all/knowledge/trainManage/myTrain/study",
    query: {
      data: JSON.stringify(state.courseData)
    }
  });
};
</script>

<style lang="scss" scoped>
@import url("@/views/all/knowledge/trainManage/scss/common.scss");

.goBack-btn {
  margin-bottom: 8px;
}

.train-img-bar {
  position: relative;
  width: 100%;
  height: 300px;

  .train-img {
    position: relative; /* 相对定位 */
    width: 100%;
    height: 100%;
    overflow: hidden; /* 隐藏超出容器的部分 */

    :deep(img) {
      width: 100%;
      height: 300px;
      object-fit: cover; /* 等比例缩放并覆盖容器 */
      // object-position: top; /* 图片居中显示 */
    }
  }

  .train-info {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300px;
    height: 200px;
    margin: auto;
    background: #fff;
    opacity: 0.8;
  }
}

.intruct-container {
  width: 100%;
  height: calc(100vh - 588px);
  padding: 20px;

  .intruct-bar {
    margin-bottom: 24px;

    .intruct-title {
      display: block;
      font-size: 16px;
      font-weight: bold;
    }

    .intruct-content {
      display: block;
      margin-top: 8px;
      font-size: 12px;
    }
  }
}

.intruct-footer {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 48px;
  margin-top: 20px;
}
</style>
